import React from 'react';
import { NavLink } from 'react-router-dom';
import styles from './index.module.less';
import nav from '../icons/nav';
import { DefaultProps } from '../../';
import { MenuDataItem } from '../../common/menu';

type SiderMenuProps = DefaultProps & {
  topmenu?: boolean;
  menuData?: MenuDataItem[];
};

export default function SiderMenu(props: SiderMenuProps) {
  const { location, topmenu, menuData } = props;
  const path = location.pathname.split('/')[1];
  const navData = (menuData || []).filter(
    (item: MenuDataItem) => item.path === `/${path}`,
  )[0];
  if (!navData) {
    return null;
  }
  return (
    <div
      className={[styles.wapper, topmenu ? styles.topmenu : null]
        .filter(Boolean)
        .join(' ')
        .trim()}
    >
      <h2 className={styles.title}>
        {(nav as any)[navData.icon]}
        <span>{navData.name}</span>
      </h2>
      <div className={styles.menu}>
        {navData.children &&
          navData.children.map((item, idx) => {
            if (item.divider) {
              return (
                <div key={idx} className={styles.divider}>
                  {item.name}
                </div>
              );
            }
            if (/^http(?:|s):\/\//.test(item.path)) {
              return (
                <a key={idx} href={item.path} target="__blank">
                  {item.name}
                  <svg viewBox="0 0 1024 1024" width={14}>
                    <path d="M821.1456 276.8384c-235.9296 25.1392-449.1776 226.7136-490.5472 452.352a38.4 38.4 0 1 1-75.5712-13.824c45.568-248.576 269.312-468.48 526.6944-510.6688l-117.8112-69.1712a38.4 38.4 0 0 1 38.912-66.2528l223.3344 131.1744a38.4 38.4 0 0 1 10.1376 57.6l-170.752 206.6432a38.4 38.4 0 1 1-59.1872-48.9472l114.7904-138.9056z" />
                    <path d="M832 620.0832a38.4 38.4 0 0 1 76.8 0v158.208c0 85.9648-61.5936 157.8496-140.8 157.8496H204.8c-79.2064 0-140.8-71.8848-140.8-157.9008V300.3904c0-86.016 61.5936-157.8496 140.8-157.8496h220.2112a38.4 38.4 0 1 1 0 76.8H204.8c-33.8944 0-64 35.072-64 81.0496V778.24c0 45.9776 30.1056 81.1008 64 81.1008h563.2c33.8944 0 64-35.1232 64-81.1008v-158.1568z" />
                  </svg>
                </a>
              );
            }
            return (
              <NavLink
                activeClassName={styles.selected}
                key={idx}
                to={item.path}
                replace
              >
                {item.name}
              </NavLink>
            );
          })}
      </div>
    </div>
  );
}
